import React from 'react';
// import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

import routes from './model/routes'

function App() {
  return (
    <Router>
      <div className="App">
        <header>
            <Link to="/">Home</Link>
            <Link to="/user">User</Link>
            <Link to="/shop">Shop</Link>
            <Link to="/news">News</Link>
        </header>

        {/* <Route exact path="/" component={Home}/>
        <Route path="/pcontent/:id" component={Pcontent}/>
        <Route path="/login" component={Login} />

        <Route path="/user" component={User}/>
        <Route path="/shop" component={Shop}/> */}
      
        {
          routes.map((route,key)=>{
            if(route.exact){
              // return <Route key={key} exact path={route.path} component={route.component}/>
              return <Route key={key} exact path={route.path} render={props => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={route.routes} />
              )}/>
            }else{
              // return <Route key={key} path={route.path} component={route.component}/>
              return <Route key={key} path={route.path} render={props => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} routes={route.routes} />
              )}/>
            }
          })
        }
      </div>
    </Router>
  );
}

export default App;
